<template>
  <div
    v-if="showIndex == 0"
    class="container"
    :style="{ width: collapse ? '100%' : 'calc(100% - 3rem)' }"
  >
    <div class="container-left">
      <div class="container-left-one" style="">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>仓库基础信息</span>
        </div>
        <!-- <div class="place">
          <el-icon class="el-icon-location"></el-icon>
          <span>第一仓库</span>
        </div> -->
        <div class="left-content-bottom">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="content-item">
                名称
                <span class="content-num" style="font-size: 0.22rem">
                  {{ ckjbqk.cangkumc }}
                </span>
                <!-- 人 -->
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                当前作业人数
                <span class="content-num">{{ ckjbqk.zuoyers }}</span>
                人
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                仓库面积
                <span class="content-num">{{ ckjbqk.cangkumj }}</span>
                ㎡
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                仓库容积
                <span class="content-num">{{ ckjbqk.cangkurj }}</span>
                m³
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                库房长
                <span class="content-num">{{ ckjbqk.chang }}</span>
                米
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                库房宽
                <span class="content-num">{{ ckjbqk.kuan }}</span>
                米
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                库房高
                <span class="content-num">{{ ckjbqk.gao }}</span>
                米
              </div>
            </el-col>
            <el-col :span="12">
              <div class="content-item">
                房屋建设实践
                <span class="content-num">{{ ckjbqk.jianshesc }}</span>
                年
              </div>
            </el-col>
          </el-row>
          <div class="wuziqfzb">
            <!-- <p>战储周转比</p> -->
            <p>挂架绑定托盘对比（长托盘/短托盘）</p>
            <el-progress
              :percentage="taishi02Bfb || 100"
              :stroke-width="14"
              :show-text="false"
              define-back-color="#7966E7"
              color="#50BDFF"
            ></el-progress>
            <div class="wuziqfzb-zb">
              <span>{{ taishi02[0].name }} {{ taishi02[0].value }}</span>
              <span>{{ taishi02[1].name }} {{ taishi02[1].value }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="container-left-two">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>货位使用率统计</span>
        </div>
        <div class="left-echart">
          <div
            ref="kuwei"
            class="kuwei"
            style="width: 100%; height: 100%"
          ></div>
        </div>
      </div>
    </div>
    <div class="container-center">
      <div class="container-center-one">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>
            <span class="tjactive">数量统计</span>
          </span>
        </div>
        <div class="jcsjtj-list">
          <div
            class="jcsjtj-item"
            v-for="(item, index) in taishi04"
            :key="index"
          >
            <p class="jcsjtj-item-num2">
              {{ item.value || 0 }}
              <span>件</span>
            </p>
            <p>{{ item.tip }}</p>
          </div>
        </div>
      </div>
      <div class="container-center-two">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>出入库统计</span>
        </div>
        <div class="center-two-echarts">
          <div
            ref="wuzicrk"
            :style="{ width: '100%', height: qsactive == 2 ? '100%' : 0 }"
          ></div>
        </div>
      </div>
      <div class="container-center-three">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>挂架型别统计</span>
        </div>
        <div class="center-two-echarts">
          <div
            v-if="taishi06.name.length == 0"
            style="
              height: 100%;
              margin: auto;
              display: flex;
              align-items: center;
              color: #dedede;
              font-size: 0.18rem;
            "
          >
            <!-- 当前历史数据为空 -->
          </div>
          <div
            ref="wuzipzcrk"
            :style="{
              width: '100%',
              height: taishi06.name.length == 0 ? '1' : '100%',
            }"
          ></div>
        </div>
      </div>
    </div>
    <div class="container-right">
      <!-- <div class="container-right-content">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>临期预警</span>
        </div>
        <div class="index-table">
          <VirList
            :item-height="itemHeight"
            :items="taishi07"
            :view-height="viewHeight"
          />
        </div>
      </div> -->
      <div class="container-right-content">
        <div class="mokuai-title">
          <img src="../../assets/jiantou.png" alt="" />
          <span>当前任务</span>
        </div>
        <div class="index-table">
          <RWlist
            :item-height="itemHeight"
            :items="taishi08"
            :view-height="viewHeight"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    v-else
    class="container"
    :style="{ width: collapse ? '100%' : 'calc(100% - 3rem)' }"
  >
    <Page2
      :show-index="showIndex"
      :t-p-list="huoweiObj.list"
      :l-x-list="LXhuoweiObj.list"
      :newHuowei="newHuowei"
    />
  </div>
</template>

<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 9999,
  }
  let _createtime = new Date()
  let _createYear = _createtime.getFullYear()
  import {
    getPmList,
    getXqyjList,
    getQfList,
    getHwList,
    getWzpzSl,
    getWzSl,
    getWzZje,
    getWzzySl,
    getRukud,
    getChukud,
    getTaishi01,
    getTaishi02,
    getTaishi03,
    getTaishi04,
    getTaishi05,
    getTaishi06,
    getTaishi07,
    getTaishi08,
  } from '@/api/taishi'
  import { queryHuoWeiList } from '@/api/cangkujichu'
  import { getHuoWeiallUser } from '@/api/biaozhun'
  import { mapGetters, mapActions } from 'vuex'
  import VirList from './components/virtuallyList.vue'
  import RWlist from './components/RWList.vue'
  import Page2 from './components/LtkShowListCss.vue'
  import { queryKucunHz } from '@/api/kucun'
  export default {
    name: 'Index',
    components: { VirList, Page2, RWlist },

    data() {
      return {
        tableData: [
          {
            mingcheng: '',
            bianhao: '',
            time: '',
          },
        ],
        //战储周转
        ZcZzObj: { zhanchu: 0, zhouzhuan: 0 },
        listQuery: Object.assign({}, _listQuery),
        XqyjQuery: {
          cangkuid: this.$store.getters['user/cangkuid'],
          beginTime: '',
          endTime: '',
        },
        huoweiList: [],
        myChart: null,
        myChart2: null,
        myChart3: null,
        myChart4: null,
        Createtime: _createYear - 2023 + 1,
        tjlxlist: [
          {
            id: 0,
            name: '全部统计',
            numlist: {},
          },
          {
            id: 1,
            name: '战储统计',
            numlist: {},
          },
          {
            id: 2,
            name: '周转统计',
            numlist: {},
          },
        ],
        qslist: [
          { id: 1, name: '统计' },
          { id: 2, name: '趋势' },
        ],
        timelist: [
          { id: 0, name: '年', type: 'year' },
          { id: 3, name: '季', type: 'season' },
          { id: 2, name: '月', type: 'month' },
          { id: 1, name: '周', type: 'week' },
        ],
        tjactive: 0,
        qsactive: 2,
        timeactive: { id: 0, name: '年', type: 'year' },
        timeactiveXqyj: { id: 3, name: '季', type: 'season' },
        churuktj: '',
        churuktjXqyj: '',
        itemHeight: 70,
        items: [],
        viewHeight: 1000,
        popper: false,
        wuzipzpopper: false,
        wuziPZpm: {},
        huoweiObj: { all: 0, Hwweishiy: 0, Hwyishiy: 0, list: [] },
        LXhuoweiObj: { all: 0, Hwweishiy: 0, Hwyishiy: 0, list: [] },
        churukuTjList: {},
        chukudAll: { year: 0, season: 0, month: 0, week: 0 },
        rukudAll: { year: 0, season: 0, month: 0, week: 0 },
        Tjloading: false, //统计弹窗加载,
        list: [],
        wuziflList: [],
        wuziPzList: [],
        wuzimcList: [],
        wuzislList: [],
        timeer: null,
        ckjbqk: {},
        taishi01: {},
        taishi02: [
          { name: '', value: 0 },
          { name: '', value: 0 },
        ],
        taishi02Bfb: '',
        taishi03: [],
        taishi04: [],
        taishi05: [],
        taishi06: {
          name: [],
          value: [],
        },
        taishi07: [],
        taishi08: [],
        newHuowei: {},
        mapList: null,
      }
    },
    async mounted() {
      this.changeShowIndex(0)
      await this.getjcxx()
      await this.getTaishi02Data()
      await this.getTaishi03Data()
      await this.getTaishi04Data()
      await this.getTaishi05Data()
      await this.getTaishi06Data()
      await this.getTaishi07Data()
      await this.getTaishi08Data()
      this.getHwList()
      this.timeer = setInterval(async () => {
        await this.getTaishi08Data()
        // this.mapList = localStorage.getItem('mapList')
        //   ? localStorage.getItem('mapList')
        //   : {}
        // if (this.mapList != JSON.stringify(this.taishi08)) {
        //   await this.getTaishi02Data()
        //   await this.getTaishi03Data()
        //   await this.getTaishi04Data()
        //   await this.getTaishi05Data()
        //   await this.getTaishi06Data()
        //   await this.getTaishi07Data()
        //   localStorage.setItem('mapList', JSON.stringify(this.taishi08))
        // }
        for (let i = 0; i < 2; i++) {
          setTimeout(async () => {
            await this.getTaishi02Data()
            await this.getTaishi03Data()
            await this.getTaishi04Data()
            await this.getTaishi05Data()
            await this.getTaishi06Data()
            await this.getTaishi07Data()
          }, 10000 * i)
        }
        this.getHwList()
      }, 30000)
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
        showIndex: 'settings/showIndex',
      }),
    },
    watch: {
      collapse: {
        handler: function (val, oldVal) {
          setTimeout(() => {
            this.myChart.resize()
            this.myChart2.resize()
            this.myChart3.resize()
            this.myChart4.resize()
          }, 500) //500为延迟时间，
        },
        // 深度观察监听
        deep: true,
      },
      showIndex: {
        handler: function (val, oldVal) {
          this.getHwList()
          this.$nextTick(() => {
            if (val == 0 && oldVal == 1) {
              this.myChart = null
              this.myChart2 = null
              this.myChart3 = null
              this.myChart4 = null
              this.lineChart()
              this.drawChart()
              this.BarChart()
              this.drawQFChart()
              this.getHwList()
            } else if ((val == 0 && oldVal == 1) || val == 1) {
              clearInterval(this.timeer)
            }
          })
        },
        // 深度观察监听
        deep: true,
      },
    },
    beforeDestroy() {
      if (this.showIndex == 0) {
        this.myChart.dispose()
        this.myChart2.dispose()
        this.myChart3.dispose()
        this.myChart4.dispose()
        //清除计时器timeer
        clearInterval(this.timeer)
      }
      clearInterval(this.timeer)
    },
    methods: {
      ...mapActions({
        openSideBar: 'settings/openSideBar',
        changeShowIndex: 'settings/changeShowIndex',
      }),
      IndexopenSideBar() {
        this.openSideBar()
      },
      async getjcxx() {
        let { data } = await getTaishi01()
        this.ckjbqk = data
      },
      gochukud() {
        this.$router.push({
          path: '/exWarehouse/page1',
          query: { type: this.timeactive.type },
        })
        this.IndexopenSideBar()
      },
      gorukud() {
        this.$router.push({
          path: '/Warehousing/page1',
          query: { type: this.timeactive.type },
        })
        this.IndexopenSideBar()
      },
      //获取货位数据
      async getHwList() {
        // let { data } = await queryHuoWeiList({})
        var promiseArr = []
        for (let index = 1; index < 6; index++) {
          let p = new Promise((resolve, reject) => {
            queryHuoWeiList(
              Object.assign({
                ceng: index,
              })
            )
              .then((res) => {
                resolve(res)
              })
              .catch((err) => {
                reject(err)
              })
          })
          promiseArr.push(p)
        }
        Promise.all(promiseArr)
          .then((res) => {
            this.newHuowei = {
              ceng1: res[0].data,
              ceng2: res[1].data,
              ceng3: res[2].data,
              ceng4: res[3].data,
              ceng5: res[4].data,
            }
          })
          .catch((err) => {
            console.log(err)
          })

        // data.forEach((item) => {
        //   item.pai = item.mingcheng.slice(0, 2)
        //   item.ceng = item.mingcheng.slice(3, 5)
        //   item.lie = item.mingcheng.slice(6)
        //   if (['05', '06'].includes(item.mingcheng.slice(0, 2))) {
        //     this.huoweiObj.all++
        //     if (item.zhuangtai == 0) {
        //       this.huoweiObj.Hwweishiy++
        //     } else {
        //       this.huoweiObj.Hwyishiy++
        //     }
        //     this.huoweiObj.list.push(item)
        //   } else {
        //     this.LXhuoweiObj.all++
        //     if (item.zhuangtai == 0) {
        //       this.LXhuoweiObj.Hwweishiy++
        //     } else {
        //       this.LXhuoweiObj.Hwyishiy++
        //     }
        //     this.LXhuoweiObj.list.push(item)
        //   }
        // })
        // this.huoweiObj.list.sort((a, b) => {
        //   if (a.pai == b.pai) {
        //     if (a.ceng == b.ceng) {
        //       if (a.lie == b.lie) {
        //       }
        //       return a.lie - b.lie // 根据层进行降序排序
        //     }
        //     return a.ceng - b.ceng // 根据姓名进行字典顺序排序
        //   }
        //   return a.pai - b.pai // 根据年龄进行升序排序
        // })
        // this.LXhuoweiObj.list.sort((a, b) => {
        //   if (a.pai == b.pai) {
        //     if (a.ceng == b.ceng) {
        //       if (a.lie == b.lie) {
        //       }
        //       return a.lie - b.lie // 根据层进行降序排序
        //     }
        //     return a.ceng - b.ceng // 根据姓名进行字典顺序排序
        //   }
        //   return a.pai - b.pai // 根据年龄进行升序排序
        // })
        // this.$nextTick(() => {
        //   if (this.qsactive == 2 && this.showIndex == 0) {
        //     this.drawChart()
        //     this.drawQFChart()
        //   }
        // })
      },
      fontSize(res) {
        const clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth
        if (!clientWidth) return
        let fontSize = clientWidth / 1920
        return res * fontSize
      },
      async getTaishi02Data() {
        try {
          let data = await getTaishi02()
          this.taishi02 = data.data

          this.taishi02Bfb = Math.round(
            (this.taishi02[0].value / this.taishi02[1].value) * 100
          )
          this.drawChart()
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      async getTaishi03Data() {
        try {
          let data = await getTaishi03()
          this.taishi03 = data.data
          this.drawChart()
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      async getTaishi04Data() {
        try {
          let data = await getTaishi04()
          this.taishi04 = data.data
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      //左下
      drawChart() {
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        if (!this.myChart2) {
          this.myChart2 = this.$echarts.init(this.$refs.kuwei)
        }

        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'item',
          },
          color: [
            'rgb(0, 140, 230)',
            '#00C6DD',
            '#FFA500',
            '#FF6A6A',
            '#4d5c70',
          ], //修改图表颜色
          legend: {
            right: 'center',
            bottom: '10',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#fff',
              fontSize: '.18rem',
            },
          },
          title: [
            {
              text: '货位状态图', // 主标题
              x: 'center',
              y: '5%',
              textStyle: {
                // 主标题样式
                fontSize: '.2rem',
                color: '#fff',
                fontWeight: 'normal',
              },
            },
          ],
          series: [
            {
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              left: '0%',
              label: {
                formatter: '{b} : {c} ',
                show: true,
                color: '#fff',
                fontSize: '.16rem',
                formatter: function (params) {
                  if (params.value == 0) {
                    //为0时不显示
                    return ''
                  } else {
                    return params.name + ':' + params.value
                  }
                },
              },
              labelLayout: {
                hideOverlap: false,
              },

              emphasis: {
                label: {
                  show: true,
                  fontSize: '.28rem',
                },
              },
              labelLine: {
                show: true,
              },
              data: this.taishi03,
            },
          ],
        }
        // 使用刚指定的配置项和数据显示图表。
        this.myChart2.setOption(option, true)
      },
      //左下1
      drawQFChart() {
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        if (!this.myChart4) {
          this.myChart4 = this.$echarts.init(this.$refs.wuziqf)
        }
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            show: false,
            trigger: 'item',
          },

          // title: [
          //   {
          //     text: this.huoweiObj.all, // 主标题
          //     x: 'center',
          //     y: 'center',
          //     textStyle: { // 主标题样式
          //       fontSize: '24',
          //       color: '#fff',
          //       fontweight: 'bold'
          //     },
          //     subtext: '总货位', // 副标题
          //     subtextStyle: { // 副标题样式
          //       color: '#fff',
          //       fontSize: 13,
          //       fontWeight: 'bold'
          //     },
          //   },],
          title: [
            {
              text: '料箱立体库', // 主标题
              x: '10%',
              y: '5%',
              textStyle: {
                // 主标题样式
                fontSize: '.22rem',
                color: '#fff',
                fontWeight: 'normal',
              },
            },
          ],
          legend: {
            right: '10%',
            top: 'center',
            orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#fff',
              fontSize: '.14rem',
            },
            data: ['未使用', '已使用'],
            formatter: (params) => {
              switch (params) {
                case '未使用':
                  return '未使用' + ' ' + this.LXhuoweiObj.Hwweishiy
                  break
                case '已使用':
                  return '已使用' + ' ' + this.LXhuoweiObj.Hwyishiy
                  break
                default:
                  return ''
              }
            },
          },
          color: ['#00F9FF', 'rgba(0, 249, 255,0.12)'],
          series: [
            {
              type: 'pie',
              radius: ['60%', '70%'],
              avoidLabelOverlap: false,
              left: 'center',
              label: {
                position: 'center',
                show: true,
                data: ['未使用', '已使用'],
                formatter: (params) => {
                  switch (params) {
                    default:
                      return (
                        '{a|' +
                        this.LXhuoweiObj.all +
                        '}' +
                        '\n' +
                        '\n' +
                        '{b|总货位}'
                      )
                  }
                },
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: '.24rem',
                    fontWeight: 'bold',
                  },
                  b: {
                    color: '#fff',
                    fontSize: '.14rem',
                    fontWeight: 'bold',
                  },
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '0.18rem',
                  fontWeight: 'bold',
                  color: 'inherit',
                },
              },
              data: [
                { value: this.LXhuoweiObj.Hwweishiy, name: '未使用' },
                { value: this.LXhuoweiObj.Hwyishiy, name: '已使用' },
              ],
            },
          ],
        }
        // 使用刚指定的配置项和数据显示图表。
        this.myChart4.setOption(option, true)
      },
      async getTaishi05Data() {
        try {
          let data = await getTaishi05()
          this.taishi05 = data.data
          this.lineChart()
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      //中二
      lineChart() {
        if (!this.myChart) {
          this.myChart = this.$echarts.init(this.$refs.wuzicrk)
        }
        let option = {
          tooltip: {
            show: false,
            trigger: 'axis',
          },
          legend: {
            orient: 'horizontal', //布局方式：  horizontal/vertical
            right: '10%', // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
            top: 'top',
            data: ['入库', '出库'],
            itemWidth: 30,
            itemHeight: 8,
            textStyle: {
              color: '#fff',
              fontSize: '.2rem',
            },
            itemGap: 15,
            icon: 'stack',
          },
          xAxis: {
            name: '时间',
            nameTextStyle: {
              color: '#fff',
              fontSize: '.18rem',
            },
            type: 'category',
            data: this.taishi05.time,
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
              fontSize: '.14rem',
              interval: 0,
              rotate: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,124,154)',
              },
            },
          },
          yAxis: {
            name: '出入库数量',
            nameTextStyle: {
              color: '#fff',
              fontSize: '.18rem',
            },
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgb(26,59,102)',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,124,154)',
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: '.16rem',
            },
          },
          series: [
            {
              name: '入库',
              type: 'line',
              // stack: 'Total',
              color: 'rgb(255,195,0)',
              smooth: true,
              data: this.taishi05.ruku,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: '.18rem',
                },
              },
            },
            {
              name: '出库',
              type: 'line',
              // stack: 'Total',
              smooth: true,
              color: 'rgb(0,196,201)',
              data: this.taishi05.chuku,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: '.18rem',
                },
              },
            },
          ],
        }
        this.myChart.setOption(option, true)
      },
      async getTaishi07Data() {
        try {
          let data = await getTaishi07()
          this.taishi07 = data.data
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      async getTaishi08Data() {
        try {
          let data = await getTaishi08()
          this.taishi08 = data.data
          // 处理响应
        } catch (error) {
          // 处理错误
          console.error('API call failed:', error)
        }
      },
      getTaishi06Data() {
        // let data = await getTaishi06()
        this.taishi06 = {
          name: [],
          value: [],
        }
        getTaishi06().then((res) => {
          res.data.forEach((item) => {
            this.taishi06.name.push(item.name)

            this.taishi06.value.push(Number(item.value))
          })
          this.$nextTick(() => {
            this.BarChart()
          })
        })
      },
      //中三
      BarChart() {
        if (!this.myChart3) {
          this.myChart3 = this.$echarts.init(this.$refs.wuzipzcrk)
        }
        let option = {
          grid: {
            bottom: '30%',
            right: '100',
          },
          xAxis: {
            name: '挂架型别',
            nameTextStyle: {
              color: '#fff',
              fontSize: '.18rem',
            },
            type: 'category',
            data: this.taishi06.name,
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
              fontSize: '.16rem',
              interval: 0,
              rotate: 30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,124,154)',
              },
            },
          },
          yAxis: {
            name: '数量',
            nameTextStyle: {
              color: '#fff',
              fontSize: '.18rem',
            },
            type: 'value',
            min: 0,
            interval: 20,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgb(26,59,102)',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(102,124,154)',
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: '.16rem',
            },
          },
          series: [
            // {
            //   data: [120, 200, 150, 80, 70, 110, 130],
            //   type: 'bar'
            // }
            {
              type: 'pictorialBar',
              name: 'pictorial element',
              z: 10,
              symbol: 'diamond',
              symbolOffset: [0, '-50%'],
              symbolPosition: 'end', //图形边缘与柱子结束的地方内切
              symbolSize: ['-100%', 10], //根据柱子大小来做调整
              barWidth: '30%',
              barMaxWidth: 25,
              itemStyle: {
                normal: {
                  color: function (params) {
                    // 给出颜色组
                    var colorList = [
                      '#de4313',
                      '#FB8441',
                      '#7A470A',
                      '#43cbff',
                      '#ce9ffc',
                      '#fff6b7',
                      '#52e5e7',
                      '#49c628',
                      '#5151e5',
                      '#2885E7',
                    ]
                    return colorList[params.dataIndex % 10]
                  },
                },
              },
              data: this.taishi06.value,
            },
            {
              type: 'bar',
              name: 'reference bar',
              barGap: '-100%',
              // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
              symbolOffset: [0, 0],
              symbolSize: [10, 10],
              barWidth: '30%',
              barMaxWidth: 25,
              z: 2,
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: '.16rem',
              },
              itemStyle: {
                // 有图就别用渐变了哈，图片更真实
                color: function (params) {
                  let x = 1
                  let y = 0
                  let x2 = 0
                  let y2 = 0
                  let type = 'linear'
                  let global = false
                  // 给出颜色组
                  var colorList = [
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#de4313' },
                        { offset: 0.5, color: '#de4313' },
                        { offset: 0.5, color: '#de4313' },
                        { offset: 1, color: '#de4313' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#FB8441' },
                        { offset: 0.5, color: '#FB8441' },
                        { offset: 0.5, color: '#FB8441' },
                        { offset: 1, color: '#FB8441' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#7A470A' },
                        { offset: 0.5, color: '#7A470A' },
                        { offset: 0.5, color: '#7A470A' },
                        { offset: 1, color: '#7A470A' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#43cbff' },
                        { offset: 0.5, color: '#43cbff' },
                        { offset: 0.5, color: '#43cbff' },
                        { offset: 1, color: '#43cbff' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#ce9ffc' },
                        { offset: 0.5, color: '#ce9ffc' },
                        { offset: 0.5, color: '#ce9ffc' },
                        { offset: 1, color: '#ce9ffc' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#fff6b7' },
                        { offset: 0.5, color: '#fff6b7' },
                        { offset: 0.5, color: '#fff6b7' },
                        { offset: 1, color: '#fff6b7' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#52e5e7' },
                        { offset: 0.5, color: '#52e5e7' },
                        { offset: 0.5, color: '#52e5e7' },
                        { offset: 1, color: '#52e5e7' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#49c628' },
                        { offset: 0.5, color: '#49c628' },
                        { offset: 0.5, color: '#49c628' },
                        { offset: 1, color: '#49c628' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#5151e5' },
                        { offset: 0.5, color: '#5151e5' },
                        { offset: 0.5, color: '#5151e5' },
                        { offset: 1, color: '#5151e5' },
                      ],
                    },
                    {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#2885E7' },
                        { offset: 0.5, color: '#2885E7' },
                        { offset: 0.5, color: '#2885E7' },
                        { offset: 1, color: '#2885E7' },
                      ],
                    },
                  ]
                  return colorList[params.dataIndex % 10]
                },
              },
              data: this.taishi06.value,
            },
          ],
        }
        this.myChart3.setOption(option, true)
      },
    },
  }
</script>
<style lang="scss" scoped>
  $popperWidth: 5rem;

  .container {
    margin: 0 !important;
    background: #002349 !important;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0.75rem;
    height: calc(100vh - 0.75rem) !important;
    padding-bottom: 0.1rem;
    box-sizing: border-box;
    font-size: 0.16rem;

    .container-left,
    .container-center,
    .container-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      // flex: 1;
    }

    .container-left,
    .container-right {
      width: 25%;
    }

    .container-center {
      width: 50%;
      margin: 0 0.1rem;
    }

    .container-left > div {
      height: 49%;
      border: 1px solid rgb(30, 90, 159);
      display: flex;
      flex-direction: column;
    }

    .container-right > div {
      height: 100%;
      border: 1px solid rgb(30, 90, 159);
    }

    .container-center > div:nth-child(1) {
      height: 20%;
      border: 1px solid rgb(30, 90, 159);
    }

    .container-center > div {
      height: 38%;
      border: 1px solid rgb(30, 90, 159);
    }

    .mokuai-title {
      height: 0.36rem;
      display: flex;
      color: #fff;
      justify-content: space-between;

      img {
        margin: auto 0.1rem auto 0.1rem;
      }

      span {
        display: inline-block;
        height: 0.28rem;
        line-height: 0.28rem;
        font-size: 0.2rem;
        flex: 1;
        margin: auto 0;
        background: linear-gradient(
          to right,
          rgb(21, 78, 148),
          rgba(21, 78, 148, 0.1)
        );

        span {
          color: #999;
          padding-right: 0.4rem;
        }

        span:hover {
          cursor: pointer;
        }
      }

      p {
        font-size: 0.16rem;
        color: #999;
        margin: auto 0.2rem;
      }

      .tjactive {
        color: #fff;
      }

      .mokuai-dw {
        font-size: 0.18rem;
        line-height: 0.38rem;
        color: #999;

        span {
          background: none !important;
          padding-right: 0.15rem;
        }

        .qsactive {
          color: #00f9ff;
        }

        span:hover {
          cursor: pointer;
        }
      }
    }

    .place {
      padding: 0.1rem;
      background: rgb(45, 156, 219);
      width: fit-content;
      font-size: 0.18rem;
      color: #fff;
      margin: 0.2rem 0.15rem;
      border-radius: 0.05rem;

      i {
        font-size: 0.2rem;
        margin-right: 0.05rem;
      }
    }

    .left-content-bottom {
      flex: 1;
      padding: 0 0.15rem;
      line-height: 0.5rem;
      display: flex;
      flex-direction: column;
      .content-item {
        border: 1px solid rgb(30, 90, 159);
        color: #fff;
        margin-bottom: 0.15rem;
        padding-left: 0.1rem;
        white-space: nowrap;

        .content-num {
          font-size: 0.3rem;
          color: rgb(80, 189, 255);
          vertical-align: middle;
          margin: 0 0.05rem;
        }
      }

      .wuziqfzb {
        font-size: 0.18rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        p {
          margin: 0.15rem 0;
          line-height: 0.14rem;
          color: #fff;
        }

        .wuziqfzb-zb {
          display: flex;
          justify-content: space-between;
          color: #f3f3f3;
        }
      }
    }

    .container-left-two {
      display: flex;
      flex-direction: column;
    }

    .left-content-bottom2 {
      padding: 0 0.15rem;
      line-height: 0.4rem;
      display: flex;
      margin-top: 0.2rem;

      .content-item2 {
        margin-right: 0.1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .content-num {
          font-size: 0.38rem !important;
        }
      }

      .content-item2,
      .content-item {
        border: 1px solid rgb(30, 90, 159);
        color: #fff;
        margin-bottom: 0.15rem;
        padding-left: 0.1rem;
        flex: 1;
        display: flex;
        align-items: center;

        .content-num {
          font-size: 0.3rem;
          color: rgb(80, 189, 255);
          vertical-align: middle;
          margin: 0 0.05rem;
        }
      }
    }

    .left-echart {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
    }

    .right-echart {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      border-bottom: 2px solid #00306d;
    }

    .container-center-two,
    .container-center-three,
    .container-right-one,
    .container-right-content {
      display: flex;
      flex-direction: column;
    }
    .container-right-content {
      height: 100% !important;
    }
    .jcsjtj-list {
      display: flex;
      align-items: center;
      height: calc(100% - 0.36rem);

      ::v-deep {
        .el-divider--vertical {
          height: 5em;
        }
      }

      .popper {
        width: $popperWidth;
        height: fit-content;
        max-height: 30vh;
        overflow-y: auto;
        position: absolute;
        background: rgb(6, 51, 108);
        border: 1px solid rgb(33, 90, 159);
        z-index: 2000;
        left: -($popperWidth / 2) + (0.16rem * 2);
        color: rgba($color: #fefefe, $alpha: 0.6);

        .data-item {
          padding: 0.15rem;

          .item-pzmc {
            font-size: 0.2rem;
            text-align: left;
            margin-bottom: 0.15rem;
          }

          //品种子类
          .item-pzzl {
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 0.16rem;
            margin-bottom: 0.1rem;
          }

          .item-pznum {
            font-size: 0.2rem;
            color: #fff;
          }
        }
      }

      .jcsjtj-item {
        margin: auto;
        font-size: 0.18rem;
        color: #fff;
        text-align: center;
        position: relative;

        p {
          margin: 0;
        }

        .jcsjtj-item-num {
          font-size: 0.3rem;
          color: rgb(255, 225, 38);
          font-weight: bold;
        }

        .jcsjtj-item-num2 {
          font-size: 0.3rem;
          color: #3c9dff;
          font-weight: bold;

          span {
            font-size: 0.16rem;
            color: rgba($color: #fefefe, $alpha: 0.6);
          }
        }
      }
    }

    .search-time {
      margin: 0.1rem 0.2rem;

      ::v-deep {
        .el-date-editor--daterange.el-input__inner {
          width: 2.7rem;
          background-color: transparent;
          border: 1px solid rgb(33, 90, 159);
        }

        .el-range-separator {
          color: rgba($color: #fefefe, $alpha: 0.6);
        }

        .el-range-input {
          background: transparent;
          color: rgba($color: #fefefe, $alpha: 0.6);
        }
      }

      .search-item-btn {
        color: rgba($color: #fefefe, $alpha: 0.6);
        margin-left: 0.2rem;

        span {
          padding: 0.1rem;
        }

        span:hover {
          cursor: pointer;
        }

        .timeactive {
          color: #000;
          background: rgb(0, 249, 255);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          padding: 0.05rem 0.1rem;
          border-radius: 0.1rem;
        }
      }
    }

    .center-two-echarts {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;

      .search-data {
        display: flex;
        height: 100%;

        div {
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content: center;
          margin: auto;

          p {
            font-size: 0.84rem;
            color: #00f9ff;
            margin: 0.15rem 0;
            line-height: 1;
            font-weight: bold;
          }

          .rkd {
            color: #fedb8d;
          }

          span {
            color: #fff;
            font-size: 0.26rem;
          }
        }
      }
    }

    .index-table {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0 0.2rem 0.2rem;
      box-sizing: border-box;
      flex: 1;
      overflow: hidden;

      ::v-deep {
        .el-table {
          border: none;
          background-color: transparent;
        }

        .el-table td.el-table__cell {
          border: none;
        }

        .el-table th.el-table__cell {
          background: #00306d;
          border-bottom: 1px solid #215a9f;
          border-top: 1px solid #215a9f;
        }

        th.el-table__cell:nth-child(1) {
          border-left: 1px solid #215a9f;
        }

        th.el-table__cell:nth-child(3) {
          border-right: 1px solid #215a9f;
        }

        .el-table__header-wrapper {
          // border: 1px solid #215A9F;
        }

        .el-table::before {
          background-color: transparent;
        }

        .el-table th .cell {
          color: #fff;
        }

        .el-table tr {
          background-color: transparent;
        }
      }
    }
  }

  ::v-deep .el-range-editor--small .el-range__icon {
    line-height: 0.24rem !important;
  }

  .app-main-container {
    width: 100%;
    margin: 0 !important;

    .app-main-height {
    }

    @keyframes in-out {
      0% {
        width: 100%;
      }

      100% {
        width: calc(100% - 3rem);
      }
    }
  }

  ::v-deep .el-date-editor .el-range__close-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
